<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery-4-nextUntil/prevUntil选择器</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        /* div>p{
            color: red;
        } */
    </style>
    <script>
        $(function () {
            //nextUntil选择器：选定同级下面所有节点，直到指定的元素
            $('.box1').nextUntil('span').css('color', 'blue');


            //prevUntil选择器：选定同级上面所有节点，直到指定的元素
            $('p').prevUntil('div').css('color', 'red');

            //siblings选择器，上下相邻的所有元素
            $('#ss').siblings('li').css('color', 'green');
        });
    </script>
</head>

<body>
    <div class="box1">
        nextUntil选择器1
    </div>
    <div>
        nextUntil选择器2
    </div>
    <div>
        nextUntil选择器3
    </div>
    <div>
        nextUntil选择器4
    </div>

    <span>nextAll选择器1</span>
    <span>nextAll选择器2</span>
    <p>nextAll选择器3</p>

    <ul>
        <li>siblings选择器</li>
        <li id="ss">siblings选择器</li>
        <li>siblings选择器</li>
    </ul>

    
</body>

</html>